<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用构造函数生成正则表达式</title>
</head>

<body>
    <!-- 
        我们知道要优先使用字面量来创建正则，但有时正则表达式的主体是不确定的，
        此时可以使用构造函数来创建。模拟getElementsByClassName方法，
        就是很能说明该问题的一个例子。

        getElementsByClassName函数的实现思路是：

        比如要获取className为"high"的dom元素；
        首先生成一个正则：/(^|\s)high(\s|$)/；
        然后再用其逐一验证页面上的所有dom元素的类名，拿到满足匹配的元素即可。
    -->
    <p class="high">1111</p>

    <p class="left high">2222</p>

    <p>3333</p>

    <script>
        // 模拟类名选择器
        function getElementsByClassName(className) {
            // 容器
            const result = []
            // 先把页面中所有的标签拿过来
            const tags = [...document.getElementsByTagName('*')]
            // 动态生成类名的正则表达式
            const reg = new RegExp(`(^|\\s)${className}(\\s|$)`)

            // 按照正则 去遍历所有的标签 提取出满足条件的标签
            for (const el of tags) {
                if (reg.test(el.className)) {
                    result.push(el)
                }
            }

            return result
        }

        // 验证一下 可以看到 上面两个 p 标签的字体颜色变红了
        const highs = getElementsByClassName('high')
        highs.forEach(item => item.style.color = 'red')
    </script>


</body>

</html>